// 引入公共样式
@import './common.scss';

// ---详情页面样式设置---
header {
  nav {
    button {
      font-size: 0.3467rem;
    }
    h4 {
      flex-shrink: 0;
      font-size: 0.4rem;
      margin: 0 auto;
      margin-left: 28%;
    }

    i.star {
      position: relative;
      color: #ff9344;
      font-size: 0.5867rem;
    }
  }
}

main {
  .big_view {
    margin-top: 0.3333rem;
    p:first-of-type {
      margin-top: 0.48rem;
      margin-bottom: 0.7733rem;
      display: flex;
      justify-content: space-between;
      span {
        color: #ff9344;
        font-size: 0.76rem;
      }
      button {
        color: #fff;
        width: 1.4933rem;
        height: 0.8rem;
        background-color: #ff9344;
        font-size: 0.4rem;
        border: none;
        border-radius: 0.2667rem;
        text-align: center;
      }
    }

    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      div:first-of-type {
        margin-bottom: 0.5067rem;
        font-size: 0.4rem;
        i {
          color: #ff9344;
          font-size: 0.5067rem;
        }
        span {
          color: #ffa86a;
        }
      }

      div:last-of-type {
        font-size: 0.48rem;
        color: #999;
      }
    }
  }

  //   商店
  .shopping {
    // 商店标题
    .shopping_header {
      margin: 0 auto;
      margin-bottom: 0.1333rem;
      padding: 0.2533rem 0.1333rem 0.2267rem 0.16rem;
      height: 0.8933rem;
      display: flex;
      justify-content: space-between;
      background-color: #ff9344;
      font-size: 0.4rem;
      color: #fff;
      line-height: 0.8933rem;
    }

    // 商店内容
    .shopping_content {
      .sushi {
        margin-bottom: 0.1333rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0.2667rem;
        span {
          width: 2.36rem;
          height: 0.52rem;
          position: absolute;
          left: 0;
          bottom: 20%;
          font-size: 0.32rem;
          color: #000;
          background-color: rgba(244, 242, 242, 0.6);
          text-align: center;
          line-height: 0.52rem;
          font-weight: 800;
        }
        img {
          width: 2.36rem;
          height: 2.36rem;
        }
        div {
          p:nth-of-type(1) {
            font-size: 0.4267rem;
          }
          p:nth-of-type(2) {
            margin-top: -0.1333rem;
            margin-left: 0.1333rem;
            i {
              margin-left: -0.2rem;
              color: #ff9344;
              font-size: 0.48rem;
            }
          }
          p:nth-of-type(3) {
            color: #888;
            font-size: 0.32rem;
          }

          p:nth-of-type(4) {
            font-size: 0.2667rem;
            color: #ff9344;
          }
        }
        button {
          background-color: #ff9344;
          font-size: 0.4rem;
          width: 1.4933rem;
          height: 0.8rem;
          border-radius: 0.8em;
          border: none;
          color: #fff;
        }
      }
    }
  }
}
